<template>
  <div>
    <div>
      <button @click="changeBlue()">变蓝色</button>
      <button @click="changeGreen()">变绿色</button>
    </div>
    <div class="con" :style="`color:${this.$data.color}`">改变区域</div>
  </div>
</template>

<script>
export default {
  name: "Content",
  data() {
    return { color: "yellow" };
  },
  methods: {
    changeBlue() {
    //   console.log(this.$data.color);
      this.$data.color = "blue"
    },
    changeGreen() {
    //   console.log(this.$data.color);
      this.$data.color = "green"
    },
  },
};
</script>

<style>
.con {
  width: 500px;
  height: 300px;
  border: 1px solid yellow;
}
</style>